<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <style>
        li{
            list-style: none;
        }
        .box1{
            width: 400px;
            height: 100px;
            overflow-y: hidden;
            overflow-x: scroll;
            position: relative;
        }
       .box2{
            display: flex;
            position: absolute;
         }
         .box2 li{
             width: 50px;
             height: 50px;
             line-height: 50px;
             background: red;
             margin: 15px;
             text-align: center;
            color: #fff;
			/* flex-shrink: 0; */
         }
  </style>
</head>
  <body>
    <div class="box1">
        <ul class="box2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div> 
  </body>
</html>